<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>李晴晴--个人网站</title>
    <link rel="stylesheet" type="text/css" href="css/cssreset.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">


    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/jquery.easie.js"></script>
    <script type="text/javascript" src="js/big-ban.js"></script>
    <script type="text/javascript" src="js/big-app.js"></script>
    <script type="text/javascript" src="js/big-vi.js"></script>
    <script type="text/javascript" src="js/big-web.js"></script>
    <script type="text/javascript" src="js/big-icon.js"></script>
    <script type="text/javascript" src="js/big-mobile.js"></script>



    <script type="text/javascript">
        $(function(){

            
        })
    </script>
</head>

<body>
<div class="window-bg"></div>
<section class="content">
    <div class="page1 out">
        <!--page1的导航-->
        <nav class="page1-nav">
            <ul>
                <li><a href="javascript:;" lang="0">首页</a></li>
                <li><a href="javascript:;" lang="1">作品</a></li>
                <li><a href="javascript:;" lang="2">主题</a></li>
                <li><a href="javascript:;" lang="3" >关于</a></li>
                <li><a href="javascript:;" lang="4">联系</a></li>
            </ul>
        </nav>
        <!--page1的焦点切换-->
        <div class="fullSlide">
            <ul>
                <li style="background:url(img/slide-1.jpg) center center no-repeat;"></li>
                <li style="background:url(img/slide-2.jpg) center center no-repeat;"></li>
                <li style="background:url(img/slide-3.jpg) center center no-repeat;"></li>
            </ul>
            <a class="prev" href="javascript:void(0)"></a>
            <a class="next" href="javascript:void(0)"></a>
            <!--<a class="playState" href="javascript:void(0)"></a>-->
        </div>

    </div>

    <div class="page2 out">
        <div class="page2-in rolling">
            <!--page2的小图展示-->
            <ul>
                <li class="small-banner">
                    <a href="#">
                        <span>Banner</span>
                        <img src="img/work-ban.jpg" width="250" height="250">
                    </a>
                </li>
                <li class="small-app">
                    <a href="#">
                        <span>App</span>
                        <img src="img/work-app.jpg" width="250" height="250">
                    </a>
                </li>
                <li class="small-VI">
                    <a href="#">
                        <span>VI</span>
                        <img src="img/work-VI.jpg" width="250" height="250">
                    </a>
                </li>
                <li class="small-website">
                    <a href="#">
                        <span>Website</span>
                        <img src="img/work-web.jpg" width="250" height="250">
                    </a>
                </li>
                <li class="small-Icon">
                    <a href="#">
                        <span>Icon</span>
                        <img src="img/work-Icon.jpg" width="250" height="250">
                    </a>
                </li>
                <li class="small-yidong">
                    <a href="#">
                        <span>移动Web</span>
                        <img src="img/work-mobile.jpg" width="250" height="250">
                    </a>
                </li>
            </ul>


        </div>
        <!--page2的大图展示-->
        <!--page2的big-ban展示-->
        <div class="big-ban">

            <div class="carousel">
                <ul class="imageslist">
                    <li><a href="#"><img src="img/banner-1.jpg" /></a></li>
                    <li><a href="#"><img src="img/banner-2.jpg" /></a></li>
                    <li><a href="#"><img src="img/banner-3.jpg" /></a></li>
                    <li><a href="#"><img src="img/banner-4.jpg" /></a></li>
                    <li><a href="#"><img src="img/banner-5.jpg" /></a></li>
                    <li><a href="#"><img src="img/banner-6.jpg" /></a></li>
                    <li><a href="#"><img src="img/banner-7.jpg" /></a></li>
                    <li><a href="#"><img src="img/banner-8.jpg" /></a></li>
                    <li><a href="#"><img src="img/banner-9.jpg" /></a></li>
                </ul>
                <div class="buttons">
                    <a class="leftBtn"></a>
                    <a class="rightBtn"></a>
                </div>
                <div class="bg"></div>
                <div class="num">
                    <span class="cur"></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            <div class="closed">关闭</div>

        </div>

        <!--page2的big-app展示-->
        <div class="big-app">

              <span class="leftBtn-app"></span>
              <span class="rightBtn-app"></span>
              <ul class="imagesList">
                  <li class="n0"><div class="hei"></div><img src="img/0.jpg"></li>
                  <li class="n1"><div class="hei"></div><img src="img/1.jpg"></li>
                  <li class="n2"><div class="hei"></div><img src="img/2.jpg"></li>
                  <li class="n3"><div class="hei"></div><img src="img/3.jpg"></li>
                  <li class="n4"><div class="hei"></div><img src="img/4.jpg"></li>
              </ul>
              <div class="closed">关闭</div>

        </div>

        <!--page2的big-vi展示-->
        <div class="big-vi">
            <input id="leftBtnvi" class="leftBtn" type="button" value="上一张">
            <input id="rightBtnvi" class="rightBtn" type="button" value="下一张">
            <ul id="liebiao">
                <li class="stateA"><img src="img/VI-1.jpg" alt=""></li>
                <li class="stateB"><img src="img/VI-2.jpg" alt=""></li>
                <li class="stateC"><img src="img/VI-3.jpg" alt=""></li>
                <li class="stateD"><img src="img/VI-4.jpg" alt=""></li>
                <li class="stateE"><img src="img/VI-5.jpg" alt=""></li>
                <li class="waiting"><img src="img/VI-6.jpg" alt=""></li>
                <li class="waiting"><img src="img/VI-7.jpg" alt=""></li>
            </ul>
            <div class="closed">关闭</div>
        </div>

        <!--page2的big-web展示-->
        <div class="big-web">
            <ul>
                <li><a href="#"><img src="img/wang-1.jpg" alt="" /></a></li>
                <li><a href="#"><img src="img/wang-2.jpg" alt="" /></a></li>
                <li><a href="#"><img src="img/wang-3.jpg" alt="" /></a></li>
                <li><a href="#"><img src="img/wang-4.jpg" alt="" /></a></li>
                <li><a href="#"><img src="img/wang-5.jpg" alt="" /></a></li>
                <li><a href="#"><img src="img/wang-6.jpg" alt="" /></a></li>
            </ul>
            <div class="closed">关闭</div>
        </div>

        <!--page2的big-icon展示-->
        <div class="big-icon">
            <div class="con">
                <ul>
                    <li><img src="img/Icon1.jpg" width="400" height="370"></li>
                    <li><img src="img/Icon-2.jpg" width="400" height="370"></li>
                    <li><img src="img/Icon-3.jpg" width="400" height="370"></li>
                    <li><img src="img/Icon-4.jpg" width="400" height="370"></li>
                    <li><img src="img/Icon-5.jpg" width="400" height="370"></li>
                </ul>
            </div>
            <div class="closed">关闭</div>
        </div>

        <!--page2的big-mobile展示-->
        <div class="big-mobile">
            <div class="one">
                <div><img src="img/web-1.jpg" width="200" height="200"></div>
                <p>梦芭莎手机版</p>
            </div>
            <div class="two">
                <div><img src="img/web-2.jpg" width="200" height="200"></div>
                <p>驴妈妈手机版</p>
            </div>
            <div class="three">
                <div><img src="img/web-3.jpg" width="200" height="200"></div>
                <p>美食天下手机版</p>
            </div>
            <img src="img/header_bg_02.png" width="800" height="200" >
            <div class="closed">关闭</div>
        </div>
    </div>
    <div class="page3 out">
        <div class="iphone rolling">
            <img src="img/phone5.png" width="328px" height="600px">
            <div class="chuantong">
                <ul >
                    <li ><img src="img/theme-1.jpg" width="205px" height="364"></li>
                    <li ><img src="img/theme-2.jpg" width="205px" height="364"></li>
                    <li ><img src="img/theme-3.jpg" width="205px" height="364"></li>

                </ul>
            </div>
        </div>
        <div class="shelf rolling">
            <ul class="shelf-t0p">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <ul class="shelf-center">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <ul class="shelf-down">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <div class="page4 out">

            <div class="left-letter rolling">
                <p>Personal Skills</p>
                <p>熟练使用 Photoshop、Illustrator、Fireworks、Dreamweaver、Flash 、Axure RP、CorelDRAW、ID等各种界面设计软件及图像处理工具，熟悉美术概论，有一定绘画基础。</p>
                <p>精通DIV+CSS网页重构技术，熟练运用HTML5、CSS3、javascript、jQuery、jQueryMobile、PhoneGap、Ajax等技术,具备良好的代码风格和兼容性，对交互设计、可用性、用户体验有一定理解。</p>
            </div>
            <div class="right-letter rolling">
                <p>About me</p>
                <p>爱前端、爱设计、有足够的团队协作和沟通能力，优秀的学习与创新能力，工作责任心强、积极乐观，有激情及较强的自我驱动能力。</p>
                <p>喜欢英语，喜欢旅游，喜欢挑战，追求像素级格子设计，源于生活的设计，成就品质的细节，亦我所追求。</p></p>
            </div>
            <div class="picture rolling">

            </div>

    </div>

    <!--这里是page5的内容-->
    <div class="page5 out">
        <div class="page5-in">
            <ul>
                <p class="line rolling"></p>
                <li>
                    <figure class="rolling"></figure>
                    <p class="rolling">李晴晴--Vivian</p>
                </li>
                <li>
                    <figure class="rolling"></figure>
                    <p class="rolling">电话：15013387250</p>
                </li>
                <li >
                    <figure class="rolling"></figure>
                    <p class="rolling">QQ号码：925205161</p>
                </li>
                <li>
                    <figure class="rolling"></figure>
                    <p class="rolling">邮箱：925205161@qq.com</p>
                </li>
                <li>
                    <figure class="rolling"></figure>
                    <p class="rolling">微信二维码</p>
                </li>
            </ul>
        </div>
    </div>
</section>
<ol class="gps">
    <li class="current"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ol>
<!--这里是返回到顶部的内容-->
<a href="javascript:;" class="back"></a>
</body>
</html>
